<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'

let indicator = [{
  name: '330',
  min: 0,
  max:10
},
  {
    name: '300',
    min: 0,
    max:10
  },
  {
    name: '270',
    min: 0,max:15
  },
  {
    name: '240',
    min: 0,
    max:10
  },
  {
    name: '210',
    min: 0,
    max:10
  },
  {
    name: '180',
    min: 0,
    max:10
  },
  {
    name: '150',
    min: 0,
    max:10
  },
  {
    name: '120',
    min: 0,
    max:10
  },
  {
    name:'90',
    min: 0,
    max:10
  },
  {
    name: '60',
    min: 0,
    max:10
  },
  {
    name: '30',
    min: 0,
    max:10
  },
  {
    name: '0',
    min: 0,
    max:10
  }]

let colorList = ['rgba(232, 146, 2, 1)','rgba(1, 141, 241, 1)'];
let colorListtou = ['rgba(232, 146, 2, 0.5)','rgba(1, 141, 241, 0.5)'];
let data1 = [5,7,8,9,4,6,7,8,5,7,3,5]
let data2 = [8,5,4,6,4,6,5,2,3,5,7,8];
const charts = ref()
const option = {
  legend: {
    show:false
  },
  radar: [{
    radius: '60%',
    startAngle:30,
    splitNumber:10,
    name: {
      textStyle: {
        color: "rgba(250,250,250,0.6)",
        fontSize: 16
      }
    },
    indicator: indicator,
    center: ['50%', '50%'], // 位置
    shape: 'circle', //形状
    splitArea: {
      areaStyle: {
        color: 'transparent', //圆环颜色
        shadowColor: 'aqua', // 圆颜色
        shadowBlur: 10
      }
    },
    axisLine: {
      lineStyle: {
        color: '#08585F' // 分割线
      }
    },
    splitLine: {
      lineStyle: {
        color: '#08585F', //圆线
        width: 2
      }
    }
  }],
  series: [{
    type: 'radar',
    data: [{
      value:data1,
      name: '',
      itemStyle: {
        color: '#327BFA',
        opacity: 0
      },
      lineStyle: {
        width: 4,
        type: 'solid',
        color:colorList[0]
      },
      areaStyle: {
        normal: {
          color:colorListtou[0]
        }
      }
    },

    ]
  },{
    type: 'radar',
    data: [{
      value:data2,
      name: '',
      itemStyle: {
        color: 'red',
        opacity: 0
      },
      lineStyle: {
        width: 4,
        type: 'solid',
        color:colorList[1]
      },
      areaStyle: {
        normal: {
          color:colorListtou[1]
        }
      }
    },

    ]
  }

  ]
}
onMounted(()=> {
  const myCharts = echarts.init(charts.value)
  myCharts.setOption({...option})
})
</script>

<template>
  <div class="counter-container">
    <div class="counter-tit">
      <p class="tit">数据统计</p>
      <p class="bg"></p>
    </div>
    <div class="charts" ref="charts">
    </div>
  </div>
</template>

<style scoped lang="scss">
.counter-container{
  background: url("../../images/dataScreen-main-lb.png") no-repeat;
  background-size: cover;
  .counter-tit{
    margin-left: 20px;
    .tit{
      color: white;
      font-size: 20px;
      margin:10px 0;
    }
    .bg{
      width: 68px;
      height: 7px;
      background: url("../../images/dataScreen-title.png");
    }
  }
  .charts{
    height: calc(100% - 40px);
  }
}

</style>